<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<!--要给后期动态生成的元素也绑定事件 on-->
<!--<button id="btn">普通按钮</button>-->

<table>
    <tr class="trclass">
        <td>12345</td>
        <td>abcde</td>
        <td>67890</td>
    </tr>
</table>


<button id="btnadd">add row</button>

<hr>

<div id="exampleDiv" style="width: 100px;
 height: 100px; background-color: lightgray;">悬停我
</div>

<hr>


<input type="text" placeholder="请输入文本:">

<hr>


<form id="exampleForm">
    <input type="text" placeholder="输入内容">
    <button type="submit">提交</button>
    <!--    <input type="submit">-->
</form>
<script>


    $("#exampleForm").submit(function (event) {

        // console.log("表单要提交了");


        // event.preventDefault();

        // return false;
    })

    // $(":text").focus(function () {
    $(":text").blur(function () {

        console.log('hello');
    })

    $(":text").keydown(function (event) {
        // alert(123);

        // console.log(event.which);

        // if (event.which === 13){
        //     console.log('hello');
        // }
    })

    // $(".trclass").on('click', function () {
    //     // alert($(this)[0]);
    //     alert(123);
    // })

    $("#exampleDiv").hover(
        function () {
            // alert("我进来了");
            $(this).css('background', 'red');
        }, function () {
            // alert("我又跳出去了");
            $(this).css('background', 'lightgray');
        });


    $("#btnadd").click(function () {
        $("table:first tbody").append(` <tr class="trclass">
            <td>xxxxx</td>
            <td>yyyyy</td>
            <td>zzzzz</td>
        </tr>`);
    })

    $("#btnadd").off('click');


    // $("#btn").on('click', function () {
    //     alert('btn被单击了');
    // })


    /*  document.getElementById("btn").onclick = function () {
          alert('btn被单击了');
      }*/


    /*    var btndom = document.getElementById("btn");

        btndom.addEventListener('click', function () {
            alert('btn被单击');
        })

        btndom.addEventListener('mouseover', function () {
            alert('鼠标在btn上方');
        })*/

</script>
</body>
</html>